<template>
  <el-row type="flex">
    <el-col :span="20"
      ><div class="grid-content bg-purple title" style="text-align: left">
        <img src="../assets/logo.png" alt="" style="width:50px;height:50px;float:left;margin:5px auto">
        <div > 电商后台管理系统</div>
      </div></el-col
    >
    <el-col :span="2"
      ><div class="grid-content bg-purple-light" style="text-align: right">
        {{ getUsername + "欢迎！" }}
      </div></el-col
    >
    <el-col :span="2"
      ><div class="grid-content bg-purple" style="text-align: right">
        <el-button type="info" @click="logout">退出</el-button>
      </div></el-col
    >
  </el-row>
</template>

<script>
import { mapGetters } from "vuex";
export default {
 data(){
   return{
     isCollapse: false,
   }
 },
  computed: {
    ...mapGetters(["getUsername"]),
  },
  methods: {
     toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 提示信息函数
    myMessage(type, text) {
      this.$message({
        type: type,
        message: text,
      });
    },
    async logout() {
      // 点击提示用户是否真的要退出，如果不退出什么都不做
      // 如果退出需要跳转到登录页面并且清空本地缓存
      let res = await this.$confirm("此次操作将永久退出该系统，是否继续", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {}); //这里的取消必须加上一个catch的回调函数
      if (res != "confirm") return this.myMessage("info", "取消登出");
      this.myMessage("success", "登出成功");
      this.$store.commit("clearToken"); //请求使用store的mutations中的方法
      this.$router.replace({ path: "/login" }); //清除之前的浏览器历史记录，直接用登录路由替代
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 22px;
  font-weight: 900;
  text-align: left;
}
</style>